const nav = {
    data() {
        return {
            categories: [
                {
                    "id": 1,
                    "name": "Finance"
                },
                {
                    "id": 28,
                    "name": "Economic"
                },
                {
                    "id": 29,
                    "name": "Money Market Insights"
                },
                {
                    "id": 18,
                    "name": "Investing"
                },
                {
                    "id": 30,
                    "name": "Financial Analysis"
                },
            ],
            showSearch: false,
            searchPageWords: ''
        }
    },
    methods: {
        handleOpenSearch() {
            this.showSearch = true
        },
        handleCloseSearch() {
            this.showSearch = false
        },
        handleToSearch() {
            window.location.href = `./search.html?keywords=${this.searchPageWords}`
        }
    },
    template:
        `<div class="nav">
        <ul class="nav-list">
            <li class="nav-list-item" v-for="cate in categories" :key="cate.id">
                <a class="nav-list-item_a" :href="'./type.html?type='+cate.id">
                    <span class="nav-list-item_a__span">{{cate.name}}</span>
                </a>
            </li>
            <li class="nav-list-item" key="search">
                <template v-if="showSearch">
                    <div class="nav-list-search" @click="handleCloseSearch">
                        <span v-if="showSearch" class="nav-list-search__span">
                            Close Search
                        </span>
                        <div class="nav-list-search-close">
                            <svg t="1716776862030" class="icon"  width="12" height="12" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3476"><path fill="#ffffff" d="M18 21v-3h-3v-3h-3v-3H9V9h3v3h3v3h3v3h3v3ZM0 21v-3h3v3Zm3-3v-3h3v3Zm3-3v-3h3v3Zm6-6V6h3v3ZM6 9V6h3v3Zm9-3V3h3v3ZM3 6V3h3v3Zm15-3V0h3v3ZM0 3V0h3v3Z"/></svg>
                        </div>
                    </div>
                    <div class="nav-list-item-search">
                        <input class="nav-list-item-search_input" v-model="searchPageWords" @keyup.enter="handleToSearch" />
                        <button class="nav-list-item-search_button" @click="handleToSearch">
                            <svg class="search-icon" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff">
                                <path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
                            </svg>
                        </button>
                    </div>
                </template>

                <span v-else class="nav-list-item_a__span" @click="handleOpenSearch">
                        Search
                    </span>
            </li>
        </ul>
    </div>`
}